<template>
  <layout>
    <div class="content-header is-sticky">
      <div>
        <h1>角色“{{state.roleName}}”授权管理</h1>
      </div>
      <div class="content-header__actions">
        <a-button @click="getPermissions"><template #icon><sync-outlined :spin="state.loading" /></template>刷新授权</a-button>
        <a-button @click="onBack"><template #icon><arrow-left-outlined /></template>返回列表</a-button>
        <a-button type="primary" @click="onGrant"><save-outlined />修改授权</a-button>
      </div>
    </div>
    <a-row type="flex" :gutter="32">
      <a-col flex="260px" class="permission__left">
        <div v-for="obj in state.systems" :key="obj.uuid" class="object__item">
          <div
            class="object__current-value object__option"
            :class="{ 'is-active': state.params.topKey == obj.key }"
            @click="onChangeSystem(obj)"
          >
            <a-image
              :width="48"
              :height="48"
              :src="ossConfig.ginvdoc.domain + obj.icon"
              :preview="false"
              fallback=""
            />
            <p class="object__current-system-name">{{obj.objectName}}</p>
          </div>
        </div>
      </a-col>
      <a-col flex="1">
      <a-checkbox-group  v-model:value="formState.form.actionUUIDArray" style="width: 100%">
      <a-table
      :loading="state.loading"
      class="apis-check__table"
      bordered
      rowKey="value"
      size="small"
      :row-selection="{ checkStrictly: false, selectedRowKeys: formState.form.menuUUIDArray, onChange }"
      :dataSource="respState.list"
      :columns="columns"
      :pagination="false"
      @change="onTableChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'apis'">
            <div class="apis-check__col">
              <div class="apis-check__group">
                <a-checkbox v-for="item in record.apis" :key="item.value" :value="item.value">
                  <!-- <span style="color: red">{{ item.label }}</span> -->
                  <span v-if="item.subType == 1" class="method-get">{{ item.label }}</span>
                  <span v-else-if="item.subType == 2" class="method-post">{{ item.label }}</span>
                  <span v-else-if="item.subType == 3" class="method-put">{{ item.label }}</span>
                  <span v-else-if="item.subType == 4" class="method-patch">{{ item.label }}</span>
                  <span v-else-if="item.subType == 5" class="method-delete">{{ item.label }}</span>
                </a-checkbox>
              </div>
              <div class="apis-check__all" v-if="record.apis.length > 0 && !isAllApiChecked(record.apis)" @click="checkAllApis(record.apis)">全选</div>
            </div>
          </template>
        </template>
      </a-table>
      </a-checkbox-group>
      </a-col>
    </a-row>
  </layout>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import 'cropperjs/dist/cropper.css'
// Object 是js的关键字, 别名处理一下
import {
  roleOperations,
  rolePermissions,
  GrantReq,
  objectList,
  ObjectListReply,
  ObjectOption,
  RoleOperationsReply,
  Object as Obj,
grant
} from '@/api/ssoms'
import { FormInstance, message } from 'ant-design-vue'
import { SyncOutlined, SaveOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue'
import { ossConfig } from '@/config'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

/**
 * 这是表格的列定义
 * 没有动态变化，所以不使用reactive
 */
const columns = [
  {
    title: '菜单',
    dataIndex: 'label',
    key: 'value',
    width: '200px'
  },
  {
    title: '操作',
    key: 'apis'
  }
]

interface System {
  name: string
  icon: string
}

interface State {
  loading: boolean
  roleName: string
  currentSystem: System
  systems: Array<Obj>
  params: any
}


/**
 * 这是列表的入参
 * 没有动态变化，所以不使用reactive
 */
const state = reactive<State>({
  loading: false, // 列表是否加载完成
  roleName: '',
  currentSystem: {
    icon: '',
    name: ''
  },
  systems: [],
  params: {
    roleUUID: '',
    topKey: ''
  }
})

/**
 * 这是列表响应
 */
const respState = reactive<RoleOperationsReply>({
  list: []
})

onMounted(() => {
  state.params.roleUUID = route.query.roleUUID
  getSystemOptions()
})

watch(
  () => route.query.roleUUID,
  (val) => {
    if (val) {
      state.params.roleUUID = val
      getSystemOptions()
    }
  }
)

/**
 * 获取列表
 */
const getList = () => {
  state.loading = true
  roleOperations({ topKey: state.params.topKey }).then((data) => {
    respState.list = data.list
    getPermissions()
  }).finally(() => {
    state.loading = false
  })
}

const getPermissions = () => {
  rolePermissions(state.params, state.params.roleUUID).then((data) => {
    formState.form.menuUUIDArray = data.menuUUIDArray
    formState.form.actionUUIDArray = data.actionUUIDArray
    state.roleName = data.roleName
  }).finally(() => {
    state.loading = false
  })
}

const onTableChange = ({ current, pageSize }) => {
  state.params.page = current
  state.params.pageSize = pageSize
  getList()
}

const onChangeSystem = (obj: Obj) => {
  if (state.params.topKey === obj.key) {
    return
  }
  state.currentSystem = { icon: obj.icon, name: obj.objectName }
  state.params.topKey = obj.key
  formState.form.topKey = obj.key
  getList()
}

const modalFormRef = ref<FormInstance>()

interface Form {
  loading: boolean
  form: GrantReq
}

const formState = reactive<Form>({
  loading: false,
  form: {
    topKey: state.params.topKey,
    menuUUIDArray: [],
    actionUUIDArray: []
  }
})

const getSystemOptions = () => {
  objectList({ topKey: '', key: '', objectName: '' }).then((data: ObjectListReply) => {
    state.systems = data.list
    if (state.systems.length > 0) {
      const firstSystem = state.systems[0]
      state.currentSystem = { name: firstSystem.objectName, icon: firstSystem.icon }
      state.params.topKey = firstSystem.key
      formState.form.topKey = firstSystem.key
      getList()
    }
  }).finally(() => {
    state.loading = false
  })
}


const onChange = (selectedRowKeys: string[]) => {
  formState.form.menuUUIDArray = selectedRowKeys
}

const checkAllApis = (record: ObjectOption[]) => {
  console.log('checkAllApis', record)
  record.forEach(obj => {
    const index = formState.form.actionUUIDArray.indexOf(obj.value)
    if (index < 0) {
      formState.form.actionUUIDArray.push(obj.value)
    }
  })
  console.log('checkAllApis', formState.form.actionUUIDArray)
}

const isAllApiChecked = (record: ObjectOption[]) => {
  for (const obj of record) {
    const index = formState.form.actionUUIDArray.indexOf(obj.value)
    if (index < 0) {
      return false
    }
  }
  return true
}

const onGrant = () => {
  grant({}, formState.form, state.params.roleUUID).then(() => {
    message.success('授权操作成功')
  })
}

const onBack = () => {
  router.push({ path: '/role', replace: true })
}
</script>
